<template>
  <!-- <van-nav-bar title="支付结果" /> -->
  <div class="index-page-content">
    <div v-if="isOrderResult">
      <div class="timer-order-text">
        <span>{{ timer }}</span
        >s自动前往
      </div>
      <div class="app-container">
        <div class="order-result">
          <van-icon name="checked" color="#02cd3e" size="60" />
          <div class="order-text">订单支付成功</div>
          <div class="code-main">
            <qrcode-vue
              v-if="qrcodeUrl"
              :value="qrcodeUrl"
              :size="240"
            ></qrcode-vue>
          </div>
          <div class="order-number-text">订单编号：{{ orderNumber }}</div>
          <div class="register-btn">
            <van-button type="primary" size="small" @click="handleCopy(1)"
              >复制地址</van-button
            >
            <van-button type="primary" size="small" @click="handleCopy(2)"
              >立即查看</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="app-container" v-if="orderType == 2">
      <div class="order-result">
        <van-icon name="checked" color="#02cd3e" size="60" />
        <div class="order-text">订单支付成功</div>
        <van-button
          class="open-mine"
          type="primary"
          size="small"
          @click="openMine()"
          >前往查看</van-button
        >
      </div>
    </div>
    <div class="app-container" v-if="orderType == 3">
      <div class="order-result">
        <div class="order-text order-success">
          <van-icon name="checked" color="#02cd3e" size="24" /><span
            >订单支付成功</span
          >
        </div>
        <div class="order-number-text qq-qrcode-number">
          <span>订单编号：{{ orderNumber }}</span
          ><van-button
            @click="copyQqNumber(orderNumber, 3)"
            type="primary"
            size="mini"
            >点击复制</van-button
          >
        </div>
        <div class="qq-qrcode">
          <img :src="state.flockQrCode" />
        </div>
        <div class="qq-qrcode-text">入群申请填你的支付单号</div>
        <div
          class="qq-qrcode-number"
          @click="copyQqNumber(state.flockQrCodeNumber, 1)"
        >
          <span>qq群：{{ state.flockQrCodeNumber }}</span
          ><van-button type="primary" size="mini">点击复制</van-button>
        </div>
      </div>
      <van-floating-bubble icon="chat" @click="onClick" />
    </div>
    <div class="app-container" v-if="orderType == 4 || orderType == 5 || orderType == 6">
      <div class="order-result">
        <van-icon name="checked" color="#02cd3e" size="60" />
        <div class="order-text">订单支付成功</div>
        <van-button
          class="open-mine"
          type="primary"
          size="small"
          @click="openMine()"
          >前往查看</van-button
        >
      </div>
    </div>
  </div>
  <van-popup v-model:show="isPopUp" closeable :style="{ padding: '64px' }">
    <van-image :src="chatImg" />
    <div class="customer-service" @click="copyQqNumber('ll3906520', 2)">
      <span>客服微信号：ll3906520</span
      ><van-button type="primary" size="mini">点击复制</van-button>
    </div>
  </van-popup>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import Clipboard from "clipboard";
import QrcodeVue from "qrcode.vue";
import { GetOrderInfoByTradeNoTo } from "@/api/goods/index.js";
import { showToast } from "vant";
import chatImg from "@/assets/image/img08.jpg";
const emits = defineEmits(['goldCoinRecharge'])

const route = useRoute();
const router = useRouter();
const orderType = ref("");

let orderNumber = ref("");
let isOrderResult = ref(false);

let tokenStr = ref("");
const handleRegister = () => {
  clearInterval(timerHref.value);
  router.push({
    path: "/mine",
    query: {
      id: tokenStr.value,
    },
  });
};

let qrcodeUrl = ref("");
let timer = ref(8);

const state = reactive({
  flockQrCode: "",
  flockQrCodeNumber: "",
});

// 复制地址
const handleCopy = (type) => {
  if (type == 1) {
    Clipboard.copy(qrcodeUrl.value);
    showToast("地址已复制，可在浏览器中打开！");
    return;
  } else {
    handleRegister();
  }
};

let timerHref = ref(null);

onMounted(async () => {
  orderNumber.value = route.query.out_trade_no;
  let params = {
    tradeNo: route.query.out_trade_no,
  };
  let data = await GetOrderInfoByTradeNoTo(params);
  try {
    console.log(data, "data");
    if (data.data.type == 0) {
      isOrderResult.value = true;
      tokenStr.value = data.data.loginCode;
      qrcodeUrl.value = "http://h5-dy.dearweb.cn/mine?id=" + tokenStr.value;
      timerHref.value = setInterval(() => {
        timer.value--;
        if (timer.value == 0) {
          handleRegister();
        }
      }, 1000);
    }
    if (data.data.type == 2) {
      isOrderResult.value = false;
    }
    if (data.data.orderType == 3) {
      isOrderResult.value = false;
      state.flockQrCode = data.data.flockQrCode;
      state.flockQrCodeNumber = data.data.flockQrCodeNumber;
    }
    orderType.value = data.data.type ? data.data.type : data.data.orderType;
  } catch (error) {}
});

const openMine = () => {
  router.push({
    name: "personage",
  });
};

const copyQqNumber = (str, types) => {
  let msg =
    types == 1
      ? "群号已复制到剪切板！"
      : types == 2
      ? "微信号已复制到剪切板"
      : "订单号已复制到剪切板";
  Clipboard.copy(str);
  showToast(msg);
};

const isPopUp = ref(false);
const onClick = () => {
  isPopUp.value = true;
};

onUnmounted(() => {
  clearInterval(timerHref.value);
});
</script>



<style lang="scss" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;

  .order-result {
    margin-top: 5vh;
    text-align: center;
  }

  .order-text {
    font-size: 18px;
    margin: 10px 0;
    color: #999;
  }

  .order-number-text {
    font-size: 14px;
    margin-bottom: 20px;
    span {
      color: #aaa !important;
    }
  }
}

.register-btn {
  margin-top: 15px;
  .van-button {
    margin: 0 5px;
  }
}

.code-main {
  width: 240px;
  height: 240px;
  margin: 15px auto;
  padding: 10px;
  background: #fff;
}
.timer-order-text {
  padding-top: 5vh;
  text-align: center;
}
.van-button {
  color: #fff;
}
.open-mine {
  margin-top: 20px;
}
.qq-qrcode {
  img {
    width: 80%;
  }
}
.qq-qrcode-number {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-right: 10px;
  }
}
.order-success {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    display: block;
    margin-left: 5px;
    height: 20px;
    line-height: 20px;
  }
}
.index-page-content {
  min-height: 100vh;
  background: #fff;
}

.van-popup {
  padding: 0 !important;
  width: 80%;
  border-radius: 16px;
  overflow: hidden;
}

.customer-service {
  margin-top: 0;
  text-align: center;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-right: 10px;
  }
}
</style>
